<template>
	<!-- 章节练习 -->
	<view class="practice">
		<u-navbar :border-bottom="false" :isBack="false" title="章节练习" title-color="#fff" back-icon-color="#fff">
			<template v-slot:right>
				<image @click="sortNavTo" class="slotImg" src="../../static/icon/filter.png"></image>
			</template>
		</u-navbar>
		<!-- <my-scroll-view scroll-y refresher-enabled :init="onRefresh"> -->
		<my-subject-chapter-collapse
			ref="collapse"
			@on-chapter-click="onChapterClick"
			:que-bank-id="checkedQueBankId"
			get-subject-api="/app/exercise/getSubject"
			get-chapter-api="/app/exercise/getChapterBySubjectId"
		></my-subject-chapter-collapse>
		<!-- </my-scroll-view> -->
		<!-- 当前章节含有进度 -->
		<uni-popup ref="progressPopup" type="center">
			<view class="popup-container">
				<view class="header">选择进度</view>
				<view class="options">
					<button type="default" @click="choseProcess('continue')">继续上次练习</button>
					<button type="default" @click="choseProcess('restart')">重新练习</button> 
				</view>
			</view>
		</uni-popup>
		<!-- 选择模式 -->
		<uni-popup ref="choseModePopup" type="center">
			<view class="popup-container">
				<view class="header">选择模式</view>
				<view class="options">
					<button type="default" @click="choseAnswerMode(0)">答题模式</button>
					<button type="default" @click="choseAnswerMode(1)">背题模式</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';
export default {
	mixins: [exam],
	onLoad() {
		this.init();
		uni.$on('updateCheckedQueBankId', data => {
			this.checkedQueBankId = data.val;
		});
	},
	data() {
		return {
			queBank: [],
			checkedQueBankId: null,
			checkedChapter: null,
			mode: null //[0 答题，1 背题，]
		};
	},
	methods: {
		handleRefresh() {
			if(!this.checkedQueBankId) return Promise.resolve()
			return this.$refs.collapse.getSubject();
		},
		init(getSubject = false) {
			this.queBank = [];
			this.type = null;
			this.checkedChapter = null;
			this.getAllQueBank(getSubject);
		},
		sortNavTo(){
			uni.navigateTo({
				url: `selectQueBank/selectQueBank?queBank=${JSON.stringify(this.queBank)}&checkedQueBankId=${this.checkedQueBankId}`,
				animationType: 'slide-in-right'
			});
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: `selectQueBank/selectQueBank?queBank=${JSON.stringify(this.queBank)}&checkedQueBankId=${this.checkedQueBankId}`,
				animationType: 'slide-in-right'
			});
		},
		onQueBankClick(e) {
			this.checkedQueBankId = e;
		},
		getAllQueBank(getSubject) {
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/exercise/getAllQuestionBank')
					.then(res => {
						this.queBank = res;
						if (res.length) {
							this.checkedQueBankId = this.checkedQueBankId || res[0].quebankid;
							getSubject && this.$refs.collapse.getSubject();
						}
						resolve();
					})
					.catch(reject);
			});
		},
		choseProcess(mode) {
			const { chapterId, type } = this.checkedChapter;
			this.$refs.progressPopup.close();
			if (mode === 'restart')
				this.clearHistory(chapterId, type).then(res => {
					this.checkedChapter.number = null;
					this.checkedChapter.errorCount = 0;
					this.checkedChapter.correctCount = 0;
					this.$refs.choseModePopup.open();
				});
			else {
				this.mode = this.checkedChapter.type;
				this.handlestartAnswer();
			}
		},
		choseAnswerMode(type) {
			this.$refs.progressPopup.close();
			this.mode = type;
			this.handlestartAnswer();
		},
		onChapterClick(chapter) {
			this.checkedChapter = this.$u.deepClone(chapter);
			if (chapter.number) this.$refs.progressPopup.open();
			else this.$refs.choseModePopup.open();
		},
		handlestartAnswer() {
			this.$refs.choseModePopup.close();
			this.$refs.progressPopup.close();
			const { chapterId, number, correctCount, errorCount } = this.checkedChapter;
			const apiSetting = { method: 'get', url: `/app/exercise/getExercises/${chapterId}` };
			const answerPageSetting = {
				correcting: true,
				autoJump: true,
				isRecitation: false,
				navTitle: '答题',
				clearHistoryHandler: 'clearPracticeHistory',
				updateHistoryHandler: 'addExerciseHistory',
				correctTopic: true,
				initArguments: [true],
				topicNumber: number,
				correctCount,
				errorCount
			};
			if (this.mode === 1) {
				//背题 答题页配置项
				answerPageSetting.autoJump = null;
				answerPageSetting.isRecitation = true;
				answerPageSetting.clearHistory = false;
				answerPageSetting.navTitle = '背题';
				answerPageSetting.updateHistoryHandler = 'updateRecitationHistory';
			}
			this.startAnswer(apiSetting, answerPageSetting);
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.practice {
	padding-bottom: var(--window-bottom);
}
.title {
	font-size: 34upx;
	display: block;
	margin-bottom: 60upx;
	font-weight: 500;
	color: #363940;
}
.slotImg{
	width: 36upx;
	height: 36upx;
	margin-right: 28upx;
	margin-top: 15upx;
}
.icon {
	width: 28upx;
	height: 28upx;
	margin-right: 28upx;
}
.popup-container {
	width: 650upx;
	height: 454upx;
	background: #ffffff;
	border-radius: 30upx;
	padding: 50upx 86upx;
	text-align: center;
	.header {
		font-size: 34upx;
		font-weight: 500;
		color: #363940;
		margin-bottom: 70upx;
	}
	.options {
		button {
			line-height: 90upx;
			border-radius: 45px;
			margin-bottom: 40upx;
			font-size: 32upx;
			border: 1px solid #f8f8f8;
			color: #636874;
		}
		button:after {
			border: none;
		}
	}
}
.button-hover {
	background: #fff6f5;
	border: 1px solid #f45c4b !important;
	color: #f45c4b !important;
	font-weight: 500;
}
</style>
